<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>实现图像区域选择并裁剪 (2) | 麻菜的博客 - 学无止尽，专研先进技术</title>
    <meta name="description" content="c++,Qt5,QML,Qt Quick,Web,3DSMax,Unreal Engine 4等技术的开发,以及生物化学,粒子物理,核物理,量子力学,光学,热学,声学等科学理论知识学习研究">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
    
    <link rel="preload" href="/assets/css/0.styles.120c5b57.css" as="style"><link rel="preload" href="/assets/js/app.8f4a866c.js" as="script"><link rel="preload" href="/assets/js/24.00753ba1.js" as="script"><link rel="preload" href="/assets/js/2.e64af106.js" as="script"><link rel="preload" href="/assets/js/7.126eaad1.js" as="script"><link rel="preload" href="/assets/js/6.2b31397e.js" as="script"><link rel="preload" href="/assets/js/8.0b1783e5.js" as="script"><link rel="preload" href="/assets/js/17.24005194.js" as="script"><link rel="preload" href="/assets/js/13.c599d64e.js" as="script"><link rel="preload" href="/assets/js/30.326675bc.js" as="script"><link rel="preload" href="/assets/js/11.6049ec15.js" as="script"><link rel="preload" href="/assets/js/4.b8ad457b.js" as="script"><link rel="preload" href="/assets/js/3.a1845274.js" as="script"><link rel="prefetch" href="/assets/js/1.d1d98b20.js"><link rel="prefetch" href="/assets/js/10.c41e85c0.js"><link rel="prefetch" href="/assets/js/12.6da0e6a2.js"><link rel="prefetch" href="/assets/js/14.70ac617f.js"><link rel="prefetch" href="/assets/js/16.b61a00eb.js"><link rel="prefetch" href="/assets/js/18.277ce043.js"><link rel="prefetch" href="/assets/js/19.451c405c.js"><link rel="prefetch" href="/assets/js/20.72754453.js"><link rel="prefetch" href="/assets/js/21.d2bb4227.js"><link rel="prefetch" href="/assets/js/22.354a8a4c.js"><link rel="prefetch" href="/assets/js/23.0b690dd8.js"><link rel="prefetch" href="/assets/js/25.4e0e6363.js"><link rel="prefetch" href="/assets/js/26.6a6acc25.js"><link rel="prefetch" href="/assets/js/27.8b49a6b1.js"><link rel="prefetch" href="/assets/js/28.8756cadc.js"><link rel="prefetch" href="/assets/js/29.c4db8372.js"><link rel="prefetch" href="/assets/js/31.be65646e.js"><link rel="prefetch" href="/assets/js/32.16a23967.js"><link rel="prefetch" href="/assets/js/33.83c9a5cd.js"><link rel="prefetch" href="/assets/js/34.82dc9af6.js"><link rel="prefetch" href="/assets/js/35.cce1e5f4.js"><link rel="prefetch" href="/assets/js/36.a3d916ad.js"><link rel="prefetch" href="/assets/js/37.cec4c776.js"><link rel="prefetch" href="/assets/js/38.214bbaa6.js"><link rel="prefetch" href="/assets/js/5.8065acb2.js"><link rel="prefetch" href="/assets/js/9.5d2f5521.js">
    <link rel="stylesheet" href="/assets/css/0.styles.120c5b57.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div data-app="true" id="app" class="v-application v-application--is-ltr theme--light" data-v-226a0c77><div class="v-application--wrap"><header class="v-sheet v-sheet--tile theme--dark v-toolbar v-app-bar v-app-bar--clipped v-app-bar--fixed primary" style="height:64px;margin-top:0px;transform:translateY(0px);left:0px;right:0px;" data-v-57ca87a5 data-v-226a0c77><div class="v-toolbar__content" style="height:64px;"><button type="button" class="v-app-bar__nav-icon v-btn v-btn--flat v-btn--icon v-btn--round theme--dark v-size--default" data-v-57ca87a5><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-menu theme--dark" data-v-57ca87a5></i></span></button> <a href="/" class="router-link-active" data-v-0bc96f30 data-v-57ca87a5><button type="button" class="white--text title hidden-sm-and-down v-btn v-btn--flat v-btn--text theme--dark v-size--x-large" data-v-0bc96f30><span class="v-btn__content">麻菜的博客</span></button></a> <div class="spacer" data-v-57ca87a5></div> <div class="v-responsive mr-0 mr-md-6 hidden-xs-only" style="max-width:300px;" data-v-0147d7ba data-v-57ca87a5><div class="v-responsive__content"><div class="v-menu" data-v-0147d7ba><div class="v-input hidden-sm-and-down v-input--hide-details theme--dark v-text-field v-text-field--single-line v-text-field--solo v-text-field--solo-inverted v-text-field--solo-flat v-text-field--enclosed" data-v-0147d7ba><div class="v-input__control"><div class="v-input__slot"><div class="v-input__prepend-inner"><div class="v-input__icon v-input__icon--prepend-inner"><i aria-hidden="true" class="v-icon notranslate mdi mdi-magnify theme--dark"></i></div></div><div class="v-text-field__slot"><label for="search" class="v-label theme--dark" style="left:0px;right:auto;position:absolute;">搜索(按 &quot;/&quot; 键激活)</label><input autocomplete="off" id="search" type="text" value=""></div></div></div></div><div data-v-0147d7ba="" role="menu" class="v-menu__content theme--light " style="max-height:auto;min-width:0px;max-width:auto;top:12px;left:0px;transform-origin:top left;z-index:0;display:none;"></div></div></div></div> <a href="/" class="v-btn v-btn--flat v-btn--router v-btn--text theme--dark v-size--default" data-v-57ca87a5><span class="v-btn__content">首页</span></a> <div class="v-menu" data-v-59452aff data-v-57ca87a5><button type="button" class="v-btn v-btn--flat v-btn--text theme--dark v-size--default" data-v-59452aff><span class="v-btn__content">
            快速导航
            <i aria-hidden="true" class="v-icon notranslate v-icon--right mdi mdi-menu-down theme--dark" data-v-59452aff></i></span></button><div data-v-59452aff="" role="menu" class="v-menu__content theme--light " style="max-height:calc(100% - 16px);min-width:0px;max-width:auto;top:12px;left:12px;transform-origin:top left;z-index:0;display:none;"></div></div> <a href="https://github.com/yuriyoung" target="_blank" class="text-capitalize v-btn v-btn--flat v-btn--text theme--dark v-size--default" data-v-57ca87a5><span class="v-btn__content">
        GitHub<i aria-hidden="true" class="v-icon notranslate v-icon--right mdi mdi-open-in-new theme--dark" style="font-size:16px;" data-v-57ca87a5></i></span></a></div></header> <div class="pb-12" data-v-4d73078d data-v-226a0c77 data-v-226a0c77><nav class="v-navigation-drawer v-navigation-drawer--close v-navigation-drawer--fixed v-navigation-drawer--is-mobile theme--light" style="height:100vh;top:0px;transform:translateX(-100%);width:380px;" data-v-75e69a68 data-v-4d73078d><div class="v-navigation-drawer__prepend"><header class="v-sheet v-sheet--tile theme--light v-toolbar v-toolbar--dense v-toolbar--flat" style="height:48px;" data-v-4d73078d><div class="v-toolbar__content" style="height:48px;"><a href="/" class="v-btn v-btn--flat v-btn--icon v-btn--round v-btn--router theme--light v-size--small" data-v-4d73078d><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-arrow-left-bold-outline theme--light" data-v-4d73078d></i></span></a> <span class="grey--text subtitle-2" data-v-4d73078d>返回</span> <div class="spacer" data-v-4d73078d></div></div></header> <hr role="separator" aria-orientation="horizontal" class="v-divider theme--light" data-v-75e69a68></div><div class="v-navigation-drawer__content">   <div class="v-list v-sheet v-sheet--tile theme--light v-list--two-line" data-v-7a9bafc5 data-v-4d73078d><div role="listbox" class="v-item-group theme--light v-list-item-group primary--text" data-v-7a9bafc5><a href="/articles/qml/" tabindex="0" class="v-list-item v-list-item--link v-list-item--selectable theme--light" data-v-7a9bafc5><div class="v-list-item__content" data-v-7a9bafc5><div class="v-list-item__title" data-v-7a9bafc5>QML</div> <div class="v-list-item__subtitle" data-v-7a9bafc5></div></div></a><a href="/articles/qml/qml-hot-reload.html" tabindex="0" class="v-list-item v-list-item--link v-list-item--selectable theme--light" data-v-7a9bafc5><div class="v-list-item__content" data-v-7a9bafc5><div class="v-list-item__title" data-v-7a9bafc5>QML热加载精简实现方法</div> <div class="v-list-item__subtitle" data-v-7a9bafc5></div></div></a><a href="/articles/qml/vacuum-command-rebuilds-the-sqlite-database-file.html" tabindex="0" class="v-list-item v-list-item--link v-list-item--selectable theme--light" data-v-7a9bafc5><div class="v-list-item__content" data-v-7a9bafc5><div class="v-list-item__title" data-v-7a9bafc5>使用vacuum命令重建Sqlite数据库文件空间列表</div> <div class="v-list-item__subtitle" data-v-7a9bafc5></div></div></a><a href="/articles/qml/dragging-frameless-window-jiggles-in-qml.html" tabindex="0" class="v-list-item v-list-item--link v-list-item--selectable theme--light" data-v-7a9bafc5><div class="v-list-item__content" data-v-7a9bafc5><div class="v-list-item__title" data-v-7a9bafc5>在QML中拖动无边框窗口时“抖动”的问题</div> <div class="v-list-item__subtitle" data-v-7a9bafc5>在某些系统(linux)会出现</div></div></a><a href="/articles/qml/resizable-borders-of-Rectangle-to-selection-rect-for-crop-image.html" tabindex="0" class="v-list-item v-list-item--link v-list-item--selectable theme--light" data-v-7a9bafc5><div class="v-list-item__content" data-v-7a9bafc5><div class="v-list-item__title" data-v-7a9bafc5>实现图像区域选择并裁剪 (1)</div> <div class="v-list-item__subtitle" data-v-7a9bafc5>可自由缩放Rectangle边，拖拽选择范围</div></div></a><a href="/articles/qml/image-area-selection-and-crop-in-qml.html" tabindex="0" class="v-item--active v-list-item--active v-list-item v-list-item--link v-list-item--selectable theme--light" data-v-7a9bafc5><div class="v-list-item__content" data-v-7a9bafc5><div class="v-list-item__title" data-v-7a9bafc5>实现图像区域选择并裁剪 (2)</div> <div class="v-list-item__subtitle" data-v-7a9bafc5>QML中可自由缩放和拖拽的Rectangle,要求C++</div></div></a><a href="/articles/qml/dragging-jiggles.html" tabindex="0" class="v-list-item v-list-item--link v-list-item--selectable theme--light" data-v-7a9bafc5><div class="v-list-item__content" data-v-7a9bafc5><div class="v-list-item__title" data-v-7a9bafc5>无边框窗口拖动“抖动”解决方法</div> <div class="v-list-item__subtitle" data-v-7a9bafc5>在QML中拖动无边框窗口时“抖动”的普通实现</div></div></a></div></div> <hr role="separator" aria-orientation="horizontal" class="v-divider theme--light" data-v-75e69a68></div><div class="v-navigation-drawer__append"><hr role="separator" aria-orientation="horizontal" class="v-divider theme--light" data-v-75e69a68> </div><div class="v-navigation-drawer__border"></div></nav> <main class="v-content" style="padding-top:64px;padding-right:0px;padding-bottom:0px;padding-left:0px;" data-v-4d73078d><div class="v-content__wrap"><div class="v-responsive mx-auto overflow-visible" style="max-width:1024px;" data-v-4d73078d><div class="v-responsive__content"><div class="container" data-v-4d73078d><div class="v-responsive overflow-visible" style="min-height:90vh;" data-v-4d73078d><div class="v-responsive__content"><div data-v-4d73078d><header class="v-sheet v-sheet--tile theme--light v-toolbar v-toolbar--flat" style="height:64px;"><div class="v-toolbar__content" style="height:64px;"><div class="v-toolbar__title">
            实现图像区域选择并裁剪 (2)
        </div></div></header> <div class="pb-6"></div> <div class="content__default"><h2 id="介绍"><a href="#介绍" class="header-anchor">#</a> 介绍</h2> <p>接上篇<a href="/resizable-borders-of-Rectangle-to-selection-rect-for-crop-image.html">可缩放边的Rectagle用于裁剪图片</a>,实现从已选择的区域截取图像。</p> <h2 id="实现效果"><a href="#实现效果" class="header-anchor">#</a> 实现效果</h2> <p><img src="/assets/img/crop-image.gif" alt="demo"></p> <h3 id="可缩放拖拽区域组件"><a href="#可缩放拖拽区域组件" class="header-anchor">#</a> 可缩放拖拽区域组件</h3> <p>接上篇<a href="/resizable-borders-of-Rectangle-to-selection-rect-for-crop-image.html">实现图像区域选择并裁剪 (1)</a>已经实现的区域选择做成独立的组件: <code>SelectionArea.qml</code></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// SelectionArea.qml</span>
<span class="token keyword">import</span> QtQuick <span class="token number">2.12</span>

Rectangle <span class="token punctuation">{</span>
    id<span class="token punctuation">:</span> selectionRect

    property bool squared<span class="token punctuation">:</span> <span class="token boolean">false</span>
    property int rulerSize<span class="token punctuation">:</span> <span class="token number">12</span>
    property color rulerColor<span class="token punctuation">:</span> <span class="token string">&quot;steelblue&quot;</span>
    property int minimumSize<span class="token punctuation">:</span> <span class="token number">50</span>
    property int maximumSize<span class="token punctuation">:</span> Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span>parent<span class="token punctuation">.</span>width<span class="token punctuation">,</span> parent<span class="token punctuation">.</span>height<span class="token punctuation">)</span>

    color<span class="token punctuation">:</span> <span class="token string">&quot;#354682B4&quot;</span>
    border <span class="token punctuation">{</span>
        width<span class="token punctuation">:</span> <span class="token number">2</span>
        color<span class="token punctuation">:</span> rulerColor
    <span class="token punctuation">}</span>

    MouseArea <span class="token punctuation">{</span>
        id<span class="token punctuation">:</span> dragMouseArea
        anchors<span class="token punctuation">.</span>fill<span class="token punctuation">:</span> parent
        drag<span class="token punctuation">{</span>
            target<span class="token punctuation">:</span> parent
            minimumX<span class="token punctuation">:</span> <span class="token number">0</span>
            minimumY<span class="token punctuation">:</span> <span class="token number">0</span>
            maximumX<span class="token punctuation">:</span> parent<span class="token punctuation">.</span>parent<span class="token punctuation">.</span>width <span class="token operator">-</span> parent<span class="token punctuation">.</span>width
            maximumY<span class="token punctuation">:</span> parent<span class="token punctuation">.</span>parent<span class="token punctuation">.</span>height <span class="token operator">-</span> parent<span class="token punctuation">.</span>height
            smoothed<span class="token punctuation">:</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span>

        onDoubleClicked<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            parent<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// destroy component</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    Repeater <span class="token punctuation">{</span>
        id<span class="token punctuation">:</span> repeater

        <span class="token comment">//TODO: optimize this code</span>
        readonly property <span class="token keyword">var</span> actions<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token string">&quot;left&quot;</span> <span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                selectionRect<span class="token punctuation">.</span>width <span class="token operator">=</span> selectionRect<span class="token punctuation">.</span>width <span class="token operator">-</span> x
                selectionRect<span class="token punctuation">.</span>x <span class="token operator">=</span> selectionRect<span class="token punctuation">.</span>x <span class="token operator">+</span> x
                <span class="token keyword">if</span><span class="token punctuation">(</span>selectionRect<span class="token punctuation">.</span>width <span class="token operator">&lt;</span> minimumSize<span class="token punctuation">)</span>
                    selectionRect<span class="token punctuation">.</span>width <span class="token operator">=</span> minimumSize
                <span class="token keyword">if</span><span class="token punctuation">(</span>selectionRect<span class="token punctuation">.</span>width <span class="token operator">&gt;</span> maximumSize<span class="token punctuation">)</span>
                    selectionRect<span class="token punctuation">.</span>width <span class="token operator">=</span> maximumSize

                <span class="token keyword">if</span><span class="token punctuation">(</span>squared<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    selectionRect<span class="token punctuation">.</span>height <span class="token operator">=</span> selectionRect<span class="token punctuation">.</span>width
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token string">&quot;right&quot;</span> <span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                selectionRect<span class="token punctuation">.</span>width <span class="token operator">=</span> selectionRect<span class="token punctuation">.</span>width <span class="token operator">+</span> x
                <span class="token keyword">if</span><span class="token punctuation">(</span>selectionRect<span class="token punctuation">.</span>width <span class="token operator">&lt;</span> minimumSize<span class="token punctuation">)</span>
                    selectionRect<span class="token punctuation">.</span>width <span class="token operator">=</span> minimumSize
                <span class="token keyword">if</span><span class="token punctuation">(</span>selectionRect<span class="token punctuation">.</span>width <span class="token operator">&gt;</span> maximumSize<span class="token punctuation">)</span>
                    selectionRect<span class="token punctuation">.</span>width <span class="token operator">=</span> maximumSize

                <span class="token keyword">if</span><span class="token punctuation">(</span>squared<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    selectionRect<span class="token punctuation">.</span>height <span class="token operator">=</span> selectionRect<span class="token punctuation">.</span>width
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token string">&quot;top&quot;</span> <span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                selectionRect<span class="token punctuation">.</span>height <span class="token operator">=</span> selectionRect<span class="token punctuation">.</span>height <span class="token operator">-</span> y
                selectionRect<span class="token punctuation">.</span>y <span class="token operator">=</span> selectionRect<span class="token punctuation">.</span>y <span class="token operator">+</span> y
                <span class="token keyword">if</span><span class="token punctuation">(</span>selectionRect<span class="token punctuation">.</span>height <span class="token operator">&lt;</span> minimumSize<span class="token punctuation">)</span>
                    selectionRect<span class="token punctuation">.</span>height <span class="token operator">=</span> minimumSize
                <span class="token keyword">if</span><span class="token punctuation">(</span>selectionRect<span class="token punctuation">.</span>height <span class="token operator">&gt;</span> maximumSize<span class="token punctuation">)</span>
                    selectionRect<span class="token punctuation">.</span>height <span class="token operator">=</span> maximumSize

                <span class="token keyword">if</span><span class="token punctuation">(</span>squared<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    selectionRect<span class="token punctuation">.</span>width <span class="token operator">=</span> selectionRect<span class="token punctuation">.</span>height
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token string">&quot;bottom&quot;</span> <span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                selectionRect<span class="token punctuation">.</span>height <span class="token operator">=</span> selectionRect<span class="token punctuation">.</span>height <span class="token operator">+</span> y
                <span class="token keyword">if</span><span class="token punctuation">(</span>selectionRect<span class="token punctuation">.</span>height <span class="token operator">&lt;</span> minimumSize<span class="token punctuation">)</span>
                    selectionRect<span class="token punctuation">.</span>height <span class="token operator">=</span> minimumSize
                <span class="token keyword">if</span><span class="token punctuation">(</span>selectionRect<span class="token punctuation">.</span>height <span class="token operator">&gt;</span> maximumSize<span class="token punctuation">)</span>
                    selectionRect<span class="token punctuation">.</span>height <span class="token operator">=</span> maximumSize

                <span class="token keyword">if</span><span class="token punctuation">(</span>squared<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    selectionRect<span class="token punctuation">.</span>width <span class="token operator">=</span> selectionRect<span class="token punctuation">.</span>height
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token string">&quot;lt&quot;</span> <span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                repeater<span class="token punctuation">.</span>actions<span class="token punctuation">[</span><span class="token string">&quot;left&quot;</span><span class="token punctuation">]</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>squared<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    repeater<span class="token punctuation">.</span>actions<span class="token punctuation">[</span><span class="token string">&quot;top&quot;</span><span class="token punctuation">]</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token string">&quot;lb&quot;</span> <span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                repeater<span class="token punctuation">.</span>actions<span class="token punctuation">[</span><span class="token string">&quot;left&quot;</span><span class="token punctuation">]</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>squared<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    repeater<span class="token punctuation">.</span>actions<span class="token punctuation">[</span><span class="token string">&quot;bottom&quot;</span><span class="token punctuation">]</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token string">&quot;rt&quot;</span> <span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                repeater<span class="token punctuation">.</span>actions<span class="token punctuation">[</span><span class="token string">&quot;right&quot;</span><span class="token punctuation">]</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>squared<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    repeater<span class="token punctuation">.</span>actions<span class="token punctuation">[</span><span class="token string">&quot;top&quot;</span><span class="token punctuation">]</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token string">&quot;rb&quot;</span> <span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                repeater<span class="token punctuation">.</span>actions<span class="token punctuation">[</span><span class="token string">&quot;right&quot;</span><span class="token punctuation">]</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>squared<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    repeater<span class="token punctuation">.</span>actions<span class="token punctuation">[</span><span class="token string">&quot;bottom&quot;</span><span class="token punctuation">]</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span>

        model<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token comment">// edge rulers</span>
            <span class="token punctuation">{</span> horizontal<span class="token punctuation">:</span> parent<span class="token punctuation">.</span>left<span class="token punctuation">,</span> vertical<span class="token punctuation">:</span> parent<span class="token punctuation">.</span>verticalCenter<span class="token punctuation">,</span> axis<span class="token punctuation">:</span> Drag<span class="token punctuation">.</span>XAxis<span class="token punctuation">,</span> callback<span class="token punctuation">:</span> <span class="token string">&quot;left&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span> horizontal<span class="token punctuation">:</span> parent<span class="token punctuation">.</span>right<span class="token punctuation">,</span> vertical<span class="token punctuation">:</span> parent<span class="token punctuation">.</span>verticalCenter<span class="token punctuation">,</span> axis<span class="token punctuation">:</span> Drag<span class="token punctuation">.</span>XAxis<span class="token punctuation">,</span> callback<span class="token punctuation">:</span> <span class="token string">&quot;right&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span> horizontal<span class="token punctuation">:</span> parent<span class="token punctuation">.</span>horizontalCenter<span class="token punctuation">,</span> vertical<span class="token punctuation">:</span> parent<span class="token punctuation">.</span>top<span class="token punctuation">,</span> axis<span class="token punctuation">:</span> Drag<span class="token punctuation">.</span>YAxis<span class="token punctuation">,</span> callback<span class="token punctuation">:</span> <span class="token string">&quot;top&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span> horizontal<span class="token punctuation">:</span> parent<span class="token punctuation">.</span>horizontalCenter<span class="token punctuation">,</span> vertical<span class="token punctuation">:</span> parent<span class="token punctuation">.</span>bottom<span class="token punctuation">,</span> axis<span class="token punctuation">:</span> Drag<span class="token punctuation">.</span>YAxis<span class="token punctuation">,</span> callback<span class="token punctuation">:</span> <span class="token string">&quot;bottom&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token comment">// corner rulers</span>
            <span class="token punctuation">{</span> horizontal<span class="token punctuation">:</span> parent<span class="token punctuation">.</span>left<span class="token punctuation">,</span> vertical<span class="token punctuation">:</span> parent<span class="token punctuation">.</span>top<span class="token punctuation">,</span> axis<span class="token punctuation">:</span> Drag<span class="token punctuation">.</span>YAxis <span class="token operator">|</span> Drag<span class="token punctuation">.</span>XAxis<span class="token punctuation">,</span> callback<span class="token punctuation">:</span> <span class="token string">&quot;lt&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span> horizontal<span class="token punctuation">:</span> parent<span class="token punctuation">.</span>left<span class="token punctuation">,</span> vertical<span class="token punctuation">:</span> parent<span class="token punctuation">.</span>bottom<span class="token punctuation">,</span> axis<span class="token punctuation">:</span> Drag<span class="token punctuation">.</span>YAxis <span class="token operator">|</span> Drag<span class="token punctuation">.</span>XAxis<span class="token punctuation">,</span> callback<span class="token punctuation">:</span> <span class="token string">&quot;lb&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span> horizontal<span class="token punctuation">:</span> parent<span class="token punctuation">.</span>right<span class="token punctuation">,</span> vertical<span class="token punctuation">:</span> parent<span class="token punctuation">.</span>top<span class="token punctuation">,</span> axis<span class="token punctuation">:</span> Drag<span class="token punctuation">.</span>YAxis <span class="token operator">|</span> Drag<span class="token punctuation">.</span>XAxis<span class="token punctuation">,</span> callback<span class="token punctuation">:</span> <span class="token string">&quot;rt&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span> horizontal<span class="token punctuation">:</span> parent<span class="token punctuation">.</span>right<span class="token punctuation">,</span> vertical<span class="token punctuation">:</span> parent<span class="token punctuation">.</span>bottom<span class="token punctuation">,</span> axis<span class="token punctuation">:</span> Drag<span class="token punctuation">.</span>YAxis <span class="token operator">|</span> Drag<span class="token punctuation">.</span>XAxis<span class="token punctuation">,</span> callback<span class="token punctuation">:</span> <span class="token string">&quot;rb&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span>
        delegate<span class="token punctuation">:</span> Rectangle <span class="token punctuation">{</span>
            width<span class="token punctuation">:</span> rulerSize
            height<span class="token punctuation">:</span> rulerSize
            radius<span class="token punctuation">:</span> rulerSize
            color<span class="token punctuation">:</span> rulerColor
            anchors<span class="token punctuation">.</span>horizontalCenter<span class="token punctuation">:</span> modelData<span class="token punctuation">.</span>horizontal
            anchors<span class="token punctuation">.</span>verticalCenter<span class="token punctuation">:</span> modelData<span class="token punctuation">.</span>vertical

            MouseArea <span class="token punctuation">{</span>
                anchors<span class="token punctuation">.</span>fill<span class="token punctuation">:</span> parent
                drag<span class="token punctuation">{</span> target<span class="token punctuation">:</span> parent<span class="token punctuation">;</span> axis<span class="token punctuation">:</span> modelData<span class="token punctuation">.</span>axis <span class="token punctuation">}</span>
                onPositionChanged<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                    <span class="token keyword">if</span><span class="token punctuation">(</span>drag<span class="token punctuation">.</span>active<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                        <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> repeater<span class="token punctuation">.</span>actions<span class="token punctuation">[</span>modelData<span class="token punctuation">.</span>callback<span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">&quot;function&quot;</span><span class="token punctuation">)</span>
                            repeater<span class="token punctuation">.</span>actions<span class="token punctuation">[</span>modelData<span class="token punctuation">.</span>callback<span class="token punctuation">]</span><span class="token punctuation">(</span>mouseX<span class="token punctuation">,</span> mouseY<span class="token punctuation">)</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token comment">// Repeater</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br></div></div><h3 id="建立裁剪对话框"><a href="#建立裁剪对话框" class="header-anchor">#</a> 建立裁剪对话框</h3> <p>建立一个裁剪工作的对话框组件<code>ImageCropDialog.qml</code>。对话框上放置一个用于指定大小的Rectangle，作为操作图片的工作viewport（视口），如显示，缩放，旋转等。Image组件的填充模式(<code>fillMode)</code>应设置为<code>Image.Pad</code>以填充整个Image组件，让图片完全显示，并且方便计算裁剪的坐标映射到源图片。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// ImageCropDialog.qml</span>
<span class="token keyword">import</span> QtQuick <span class="token number">2.12</span>
<span class="token keyword">import</span> QtQuick<span class="token punctuation">.</span>Controls <span class="token number">2.12</span>

Dialog <span class="token punctuation">{</span>
    id<span class="token punctuation">:</span> control

    property rect selectedRect
    property alias source<span class="token punctuation">:</span> imageItem<span class="token punctuation">.</span>source
    property <span class="token keyword">var</span> selection<span class="token punctuation">:</span> <span class="token keyword">undefined</span>

    <span class="token keyword">function</span> <span class="token function">createSelection</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>selection<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// centre in parent</span>
            <span class="token keyword">var</span> ajustWidth <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span>parent<span class="token punctuation">.</span>width<span class="token punctuation">,</span> parent<span class="token punctuation">.</span>height<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">;</span>
            <span class="token keyword">var</span> properties <span class="token operator">=</span> <span class="token punctuation">{</span>
                <span class="token string">&quot;width&quot;</span><span class="token punctuation">:</span> ajustWidth<span class="token punctuation">,</span> <span class="token string">&quot;height&quot;</span><span class="token punctuation">:</span> ajustWidth<span class="token punctuation">,</span>
                <span class="token string">&quot;x&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>viewport<span class="token punctuation">.</span>width <span class="token operator">-</span> ajustWidth<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">&quot;y&quot;</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>viewport<span class="token punctuation">.</span>height <span class="token operator">-</span> ajustWidth<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span>
            <span class="token punctuation">}</span>
            selection <span class="token operator">=</span> selectionComponent<span class="token punctuation">.</span><span class="token function">createObject</span><span class="token punctuation">(</span>viewport<span class="token punctuation">,</span> properties<span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    title<span class="token punctuation">:</span> <span class="token function">qsTr</span><span class="token punctuation">(</span><span class="token string">&quot;Crop Image Dialog&quot;</span><span class="token punctuation">)</span>
    modal<span class="token punctuation">:</span> <span class="token boolean">true</span>
    padding<span class="token punctuation">:</span> <span class="token number">0</span>
    standardButtons<span class="token punctuation">:</span> Dialog<span class="token punctuation">.</span>Apply <span class="token operator">|</span> Dialog<span class="token punctuation">.</span>Ok <span class="token operator">|</span> Dialog<span class="token punctuation">.</span>Cancel
    closePolicy<span class="token punctuation">:</span> Popup<span class="token punctuation">.</span>CloseOnEscape
    onApplied<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// mapping parent coordinate to current coordinate</span>
        selectedRect <span class="token operator">=</span> imageItem<span class="token punctuation">.</span><span class="token function">mapFromItem</span><span class="token punctuation">(</span>viewport<span class="token punctuation">,</span> selection<span class="token punctuation">.</span>x<span class="token punctuation">,</span> selection<span class="token punctuation">.</span>y<span class="token punctuation">,</span>selection<span class="token punctuation">.</span>width<span class="token punctuation">,</span> selection<span class="token punctuation">.</span>height<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    Component <span class="token punctuation">{</span>
        id<span class="token punctuation">:</span> selectionComponent
        SelectionArea <span class="token punctuation">{</span>
            id<span class="token punctuation">:</span> selectionRect
            squared<span class="token punctuation">:</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token comment">// iamge viewport</span>
    Rectangle <span class="token punctuation">{</span>
        id<span class="token punctuation">:</span> viewport
        anchors<span class="token punctuation">.</span>fill<span class="token punctuation">:</span> parent
        color<span class="token punctuation">:</span> <span class="token string">&quot;black&quot;</span>

        Image <span class="token punctuation">{</span>
            id<span class="token punctuation">:</span> imageItem

            <span class="token comment">// zoom in or zoom out</span>
            scale<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token operator">/</span> <span class="token punctuation">(</span>sourceSize<span class="token punctuation">.</span>height <span class="token operator">/</span> parent<span class="token punctuation">.</span>height<span class="token punctuation">)</span>
            fillMode<span class="token punctuation">:</span> Image<span class="token punctuation">.</span>Pad
            anchors<span class="token punctuation">.</span>centerIn<span class="token punctuation">:</span> parent
            onStatusChanged<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                <span class="token keyword">if</span><span class="token punctuation">(</span>status <span class="token operator">===</span> Image<span class="token punctuation">.</span>Ready<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token function">createSelection</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
            onSourceChanged<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// reset selection area</span>
                <span class="token keyword">if</span><span class="token punctuation">(</span>selection<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    selection<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    selection <span class="token operator">=</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>

            MouseArea <span class="token punctuation">{</span>
                anchors<span class="token punctuation">.</span>fill<span class="token punctuation">:</span> parent
                onClicked<span class="token punctuation">:</span> <span class="token punctuation">{</span>
                    <span class="token keyword">if</span><span class="token punctuation">(</span>imageItem<span class="token punctuation">.</span>status <span class="token operator">===</span> Image<span class="token punctuation">.</span>Ready<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                        <span class="token function">createSelection</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span> <span class="token comment">// Image item</span>
    <span class="token punctuation">}</span> <span class="token comment">// viewport</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br></div></div><h3 id="建立c-裁剪类"><a href="#建立c-裁剪类" class="header-anchor">#</a> 建立c++裁剪类</h3> <p>建立一个c++图片帮助类ImageHelper，增加一个裁剪函数<code>crop</code>，非常简单，只传入一个图片文件名和一个裁剪的大小作为参数。并使用<code>jsRegisterSingletonType</code>注册单例对象到QML。</p> <div class="language-cpp line-numbers-mode"><pre class="language-cpp"><code><span class="token comment">// ImageHelper.h</span>
<span class="token macro property">#<span class="token directive keyword">ifndef</span> IMAGEHELPER_H</span>
<span class="token macro property">#<span class="token directive keyword">define</span> IMAGEHELPER_H</span>

<span class="token macro property">#<span class="token directive keyword">include</span> <span class="token string">&lt;QObject&gt;</span></span>
<span class="token macro property">#<span class="token directive keyword">include</span> <span class="token string">&lt;QCryptographicHash&gt;</span></span>
<span class="token macro property">#<span class="token directive keyword">include</span> <span class="token string">&lt;QImage&gt;</span></span>
<span class="token macro property">#<span class="token directive keyword">include</span> <span class="token string">&lt;QDateTime&gt;</span></span>
<span class="token macro property">#<span class="token directive keyword">include</span> <span class="token string">&lt;QDir&gt;</span></span>
<span class="token macro property">#<span class="token directive keyword">include</span> <span class="token string">&lt;QUrl&gt;</span></span>

<span class="token keyword">class</span> <span class="token class-name">ImageHelper</span> <span class="token operator">:</span> <span class="token keyword">public</span> QObject
<span class="token punctuation">{</span>
    Q_OBJECT
<span class="token keyword">public</span><span class="token operator">:</span>
    <span class="token comment">// ...</span>

    <span class="token comment">// return cropped image filename, return empty string if failed</span>
    Q_INVOKABLE QUrl <span class="token function">crop</span><span class="token punctuation">(</span><span class="token keyword">const</span> QUrl <span class="token operator">&amp;</span>url<span class="token punctuation">,</span> <span class="token keyword">const</span> QRect <span class="token operator">&amp;</span>rect<span class="token punctuation">)</span>
    <span class="token punctuation">{</span>
        QUrl resultUrl<span class="token punctuation">;</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>url<span class="token punctuation">.</span><span class="token function">isEmpty</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
            <span class="token keyword">return</span> resultUrl<span class="token punctuation">;</span>
        QString fileName <span class="token operator">=</span> url<span class="token punctuation">.</span><span class="token function">isLocalFile</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">?</span> url<span class="token punctuation">.</span><span class="token function">toLocalFile</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">:</span> url<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        QImage <span class="token function">original</span><span class="token punctuation">(</span>fileName<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>original<span class="token punctuation">.</span><span class="token function">isNull</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
            <span class="token keyword">return</span> resultUrl<span class="token punctuation">;</span>

        <span class="token comment">// do crop image</span>
        QImage cropped <span class="token operator">=</span> original<span class="token punctuation">.</span><span class="token function">copy</span><span class="token punctuation">(</span>rect<span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token comment">// using the current timestamps as the filename</span>
        qint64 ms <span class="token operator">=</span> QDateTime<span class="token operator">::</span><span class="token function">currentMSecsSinceEpoch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        QByteArray md5 <span class="token operator">=</span> QCryptographicHash<span class="token operator">::</span><span class="token function">hash</span><span class="token punctuation">(</span><span class="token function">QByteArray</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setNum</span><span class="token punctuation">(</span>ms<span class="token punctuation">)</span><span class="token punctuation">,</span> QCryptographicHash<span class="token operator">::</span>Md5<span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token comment">// save to temp directory</span>
        QDir tempDir <span class="token operator">=</span> QDir<span class="token operator">::</span><span class="token function">current</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>tempDir<span class="token punctuation">.</span><span class="token function">cd</span><span class="token punctuation">(</span><span class="token function">QStringLiteral</span><span class="token punctuation">(</span><span class="token string">&quot;temp&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">{</span>
            tempDir<span class="token punctuation">.</span><span class="token function">mkdir</span><span class="token punctuation">(</span><span class="token function">QStringLiteral</span><span class="token punctuation">(</span><span class="token string">&quot;temp&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            tempDir<span class="token punctuation">.</span><span class="token function">cd</span><span class="token punctuation">(</span><span class="token function">QStringLiteral</span><span class="token punctuation">(</span><span class="token string">&quot;temp&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token comment">// no suffix</span>
        QString name <span class="token operator">=</span> tempDir<span class="token punctuation">.</span><span class="token function">path</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">&quot;/&quot;</span> <span class="token operator">+</span> <span class="token function">QString</span><span class="token punctuation">(</span>md5<span class="token punctuation">.</span><span class="token function">toHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        cropped<span class="token punctuation">.</span><span class="token function">save</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> <span class="token string">&quot;PNG&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        resultUrl <span class="token operator">=</span> QUrl<span class="token operator">::</span><span class="token function">fromLocalFile</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token keyword">return</span> resultUrl<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token comment">// other member functions</span>
    <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token macro property">#<span class="token directive keyword">endif</span> </span><span class="token comment">// IMAGEHELPER_H</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br></div></div><h3 id="注册单例对象到qml"><a href="#注册单例对象到qml" class="header-anchor">#</a> 注册单例对象到QML</h3> <div class="language-cpp line-numbers-mode"><pre class="language-cpp"><code>qmlRegisterSingletonType<span class="token operator">&lt;</span>ImageHelper<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token string">&quot;App&quot;</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">&quot;ImageHelper&quot;</span><span class="token punctuation">,</span>
                                    <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">(</span>QQmlEngine <span class="token operator">*</span><span class="token punctuation">,</span> QJSEngine <span class="token operator">*</span><span class="token punctuation">)</span> <span class="token operator">-&gt;</span> QObject<span class="token operator">*</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> ImageHelper<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>注册的模块名在本例中为App，版本号1.0。注册的对象名<code>ImageHelper</code>，在QML使用<code>ImageHelper</code>访问该对象使用Q_INVOKABL修饰的成员函数或public slot修饰的槽。</p> <h3 id="qml中调用方式"><a href="#qml中调用方式" class="header-anchor">#</a> QML中调用方式</h3> <p>在main.qml组件中，组装必要的组件来完成整个程序的功能：从磁盘中打开图片，显示到UI，选择裁剪区域，应用裁剪，显示裁剪结果。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// main.qml</span>
<span class="token keyword">import</span> QtQuick <span class="token number">2.12</span>
<span class="token keyword">import</span> QtQuick<span class="token punctuation">.</span>Controls <span class="token number">2.12</span>
<span class="token keyword">import</span> QtQuick<span class="token punctuation">.</span>Dialogs <span class="token number">1.3</span>
<span class="token keyword">import</span> App <span class="token number">1.0</span> <span class="token comment">// !!import module</span>

ApplicationWindow <span class="token punctuation">{</span>
    id<span class="token punctuation">:</span> appWindow
    title<span class="token punctuation">:</span> <span class="token function">qsTr</span><span class="token punctuation">(</span><span class="token string">&quot;Window&quot;</span><span class="token punctuation">)</span>
    width<span class="token punctuation">:</span> <span class="token number">640</span>
    height<span class="token punctuation">:</span> <span class="token number">480</span>
    visible<span class="token punctuation">:</span> <span class="token boolean">true</span>

    <span class="token comment">// select a image from disk</span>
    FileDialog <span class="token punctuation">{</span>
        id<span class="token punctuation">:</span> appImagesSelectDialog

        modality<span class="token punctuation">:</span> Qt<span class="token punctuation">.</span>WindowModal
        title<span class="token punctuation">:</span> <span class="token function">qsTr</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span>Choose a image<span class="token string">&quot;&quot;</span><span class="token punctuation">)</span>
        selectMultiple<span class="token punctuation">:</span> <span class="token boolean">false</span>
        selectFolder<span class="token punctuation">:</span> <span class="token boolean">false</span>
        nameFilters<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">&quot;Image files (*.jpeg *.png *.jpg *.gif)&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;All files (*)&quot;</span> <span class="token punctuation">]</span>
        selectedNameFilter<span class="token punctuation">:</span> nameFilters<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
        sidebarVisible<span class="token punctuation">:</span> <span class="token boolean">true</span>
        onAccepted<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token comment">// open image crop dialog</span>
            cropDialg<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            cropDialg<span class="token punctuation">.</span>source <span class="token operator">=</span> fileUrls<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    ImageCropDialog <span class="token punctuation">{</span>
        id<span class="token punctuation">:</span> cropDialg
        width<span class="token punctuation">:</span> parent<span class="token punctuation">.</span>width
        height<span class="token punctuation">:</span> parent<span class="token punctuation">.</span>height
        onApplied<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token keyword">var</span> croppedFile <span class="token operator">=</span> ImageHelper<span class="token punctuation">.</span><span class="token function">crop</span><span class="token punctuation">(</span>source<span class="token punctuation">,</span> selectedRect<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token comment">// apply crop result</span>
            source <span class="token operator">=</span> Qt<span class="token punctuation">.</span><span class="token function">resolvedUrl</span><span class="token punctuation">(</span>croppedFile<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        onAccepted<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            <span class="token comment">// show result</span>
            image<span class="token punctuation">.</span>source <span class="token operator">=</span> cropDialg<span class="token punctuation">.</span>source<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    Column <span class="token punctuation">{</span>
        anchors<span class="token punctuation">.</span>centerIn<span class="token punctuation">:</span> parent
        <span class="token comment">// show the result image</span>
        Rectangle <span class="token punctuation">{</span>
            width<span class="token punctuation">:</span> <span class="token number">256</span><span class="token punctuation">;</span> height<span class="token punctuation">:</span> <span class="token number">256</span>
            border<span class="token punctuation">.</span>color<span class="token punctuation">:</span> <span class="token string">&quot;blue&quot;</span><span class="token punctuation">;</span> border<span class="token punctuation">.</span>width<span class="token punctuation">:</span> <span class="token number">1</span>
            Image <span class="token punctuation">{</span> id<span class="token punctuation">:</span> image<span class="token punctuation">;</span> anchors<span class="token punctuation">.</span>fill<span class="token punctuation">:</span> parent <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
        Button <span class="token punctuation">{</span>
            text<span class="token punctuation">:</span> <span class="token function">qsTr</span><span class="token punctuation">(</span><span class="token string">&quot;Choose a image&quot;</span><span class="token punctuation">)</span>
            onClicked<span class="token punctuation">:</span> appImagesSelectDialog<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br></div></div><h3 id="注册qml类型"><a href="#注册qml类型" class="header-anchor">#</a> 注册QML类型</h3> <p>最后，在main.cpp中启动应用程序,在加载main.qml之前注册<code>ImageHelper</code>类型到QML,本例子中注册为单例，当然也可以注册为QML组件类型。</p> <blockquote><pre><code>qmlRegisterType&lt;ImageHelper&gt;(&quot;App&quot;, 1, 0, &quot;ImageHelper&quot;);
</code></pre></blockquote> <div class="language-cpp line-numbers-mode"><pre class="language-cpp"><code><span class="token comment">// main.cpp</span>
<span class="token macro property">#<span class="token directive keyword">include</span> <span class="token string">&lt;QGuiApplication&gt;</span></span>
<span class="token macro property">#<span class="token directive keyword">include</span> <span class="token string">&lt;QQmlApplicationEngine&gt;</span></span>

<span class="token comment">// include crop helper</span>
<span class="token macro property">#<span class="token directive keyword">include</span> <span class="token string">&quot;ImageHelper.h&quot;</span></span>

<span class="token keyword">int</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token keyword">int</span> argc<span class="token punctuation">,</span> <span class="token keyword">char</span> <span class="token operator">*</span>argv<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
    QCoreApplication<span class="token operator">::</span><span class="token function">setAttribute</span><span class="token punctuation">(</span>Qt<span class="token operator">::</span>AA_EnableHighDpiScaling<span class="token punctuation">)</span><span class="token punctuation">;</span>
    QGuiApplication <span class="token function">app</span><span class="token punctuation">(</span>argc<span class="token punctuation">,</span> argv<span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">// register image crop helper</span>
    qmlRegisterSingletonType<span class="token operator">&lt;</span>ImageHelper<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token string">&quot;App&quot;</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">&quot;ImageHelper&quot;</span><span class="token punctuation">,</span>
                                          <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">(</span>QQmlEngine <span class="token operator">*</span><span class="token punctuation">,</span> QJSEngine <span class="token operator">*</span><span class="token punctuation">)</span> <span class="token operator">-&gt;</span> QObject<span class="token operator">*</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">new</span> ImageHelper<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    QQmlApplicationEngine engine<span class="token punctuation">;</span>
    engine<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span><span class="token function">QUrl</span><span class="token punctuation">(</span><span class="token function">QStringLiteral</span><span class="token punctuation">(</span><span class="token string">&quot;qrc:/main.qml&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>engine<span class="token punctuation">.</span><span class="token function">rootObjects</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">isEmpty</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token keyword">return</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> app<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><h3 id="结束"><a href="#结束" class="header-anchor">#</a> 结束</h3> <ul><li>待续...</li></ul></div> <!----></div></div></div></div></div></div></div></main></div> <main class="v-content" style="padding-top:64px;padding-right:0px;padding-bottom:0px;padding-left:0px;" data-v-a20e1186 data-v-226a0c77><div class="v-content__wrap"><hr role="separator" aria-orientation="horizontal" class="v-divider theme--light" data-v-a20e1186> <footer class="v-footer v-sheet v-sheet--tile theme--light" data-v-a20e1186><div class="container" data-v-abe47414 data-v-abe47414 data-v-a20e1186><div class="text-center grey--text subtitle-2" data-v-abe47414>友情链接</div> <div class="col col-12" data-v-abe47414 data-v-abe47414><div class="row align-center justify-center" data-v-abe47414 data-v-abe47414><span class="v-tooltip v-tooltip--top" data-v-abe47414><div data-v-abe47414="" class="v-tooltip__content" style="left:0px;max-width:auto;opacity:0;top:12px;z-index:0;display:none;"></div><a href="https://jaredtao.github.io" target="_blank" draggable="false" dense="" class="ma-2 v-chip v-chip--clickable v-chip--link theme--dark v-size--default teal" data-v-abe47414><span class="v-chip__content"><div class="v-avatar v-avatar--left" style="height:48px;min-width:48px;width:48px;" data-v-abe47414><div class="v-responsive v-image" data-v-abe47414><div class="v-image__image v-image__image--preload v-image__image--cover" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div>
                            涛哥的博客
                            <i aria-hidden="true" class="v-icon notranslate v-icon--right mdi mdi-open-in-new theme--dark" style="font-size:12px;" data-v-abe47414></i></span></a></span><span class="v-tooltip v-tooltip--top" data-v-abe47414><div data-v-abe47414="" class="v-tooltip__content" style="left:0px;max-width:auto;opacity:0;top:12px;z-index:0;display:none;"></div><a href="https://zhuanlan.zhihu.com/TaoQt" target="_blank" draggable="false" dense="" class="ma-2 v-chip v-chip--clickable v-chip--link theme--dark v-size--default teal" data-v-abe47414><span class="v-chip__content"><div class="v-avatar v-avatar--left" style="height:48px;min-width:48px;width:48px;" data-v-abe47414><div class="v-responsive v-image" data-v-abe47414><div class="v-image__image v-image__image--preload v-image__image--cover" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div>
                            Qt进阶之路
                            <i aria-hidden="true" class="v-icon notranslate v-icon--right mdi mdi-open-in-new theme--dark" style="font-size:12px;" data-v-abe47414></i></span></a></span><span class="v-tooltip v-tooltip--top" data-v-abe47414><div data-v-abe47414="" class="v-tooltip__content" style="left:0px;max-width:auto;opacity:0;top:12px;z-index:0;display:none;"></div><a href="https://qtdream.com" target="_blank" draggable="false" dense="" class="ma-2 v-chip v-chip--clickable v-chip--link theme--dark v-size--default teal" data-v-abe47414><span class="v-chip__content"><div class="v-avatar v-avatar--left" style="height:48px;min-width:48px;width:48px;" data-v-abe47414><div class="v-responsive v-image" data-v-abe47414><div class="v-image__image v-image__image--preload v-image__image--cover" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div>
                            萌梦论坛
                            <i aria-hidden="true" class="v-icon notranslate v-icon--right mdi mdi-open-in-new theme--dark" style="font-size:12px;" data-v-abe47414></i></span></a></span><span class="v-tooltip v-tooltip--top" data-v-abe47414><div data-v-abe47414="" class="v-tooltip__content" style="left:0px;max-width:auto;opacity:0;top:12px;z-index:0;display:none;"></div><a href="https://www.heilqt.com" target="_blank" draggable="false" dense="" class="ma-2 v-chip v-chip--clickable v-chip--link theme--dark v-size--default teal" data-v-abe47414><span class="v-chip__content"><div class="v-avatar v-avatar--left" style="height:48px;min-width:48px;width:48px;" data-v-abe47414><div class="v-responsive v-image" data-v-abe47414><div class="v-image__image v-image__image--preload v-image__image--cover" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div>
                            寒山-居士的博客
                            <i aria-hidden="true" class="v-icon notranslate v-icon--right mdi mdi-open-in-new theme--dark" style="font-size:12px;" data-v-abe47414></i></span></a></span><span class="v-tooltip v-tooltip--top" data-v-abe47414><div data-v-abe47414="" class="v-tooltip__content" style="left:0px;max-width:auto;opacity:0;top:12px;z-index:0;display:none;"></div><a href="http://www.cryfeifei.cn" target="_blank" draggable="false" dense="" class="ma-2 v-chip v-chip--clickable v-chip--link theme--dark v-size--default teal" data-v-abe47414><span class="v-chip__content"><div class="v-avatar v-avatar--left" style="height:48px;min-width:48px;width:48px;" data-v-abe47414><div class="v-responsive v-image" data-v-abe47414><div class="v-image__image v-image__image--preload v-image__image--cover" style="background-image:;background-position:center center;"></div><div class="v-responsive__content"></div></div></div>
                            张小飞的博客
                            <i aria-hidden="true" class="v-icon notranslate v-icon--right mdi mdi-open-in-new theme--dark" style="font-size:12px;" data-v-abe47414></i></span></a></span></div></div></div> <div class="text-center col col-12" data-v-a20e1186><span data-v-a20e1186>© 2019 — <strong data-v-a20e1186>Yuri Young</strong></span> <a href="https://github.com/yuriyoung" target="_blank" class="v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--small" data-v-a20e1186><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-github-circle theme--light" data-v-a20e1186></i></span></a></div></footer></div></main> <button type="button" title="Scroll to top" aria-label="Scroll to top" class="v-btn v-btn--bottom v-btn--contained v-btn--fab v-btn--fixed v-btn--right v-btn--round theme--dark v-size--default pink" style="display:none;" data-v-0daec80c data-v-0daec80c data-v-226a0c77><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-chevron-up theme--dark" data-v-0daec80c></i></span></button></div></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.8f4a866c.js" defer></script><script src="/assets/js/24.00753ba1.js" defer></script><script src="/assets/js/2.e64af106.js" defer></script><script src="/assets/js/7.126eaad1.js" defer></script><script src="/assets/js/6.2b31397e.js" defer></script><script src="/assets/js/8.0b1783e5.js" defer></script><script src="/assets/js/17.24005194.js" defer></script><script src="/assets/js/13.c599d64e.js" defer></script><script src="/assets/js/30.326675bc.js" defer></script><script src="/assets/js/11.6049ec15.js" defer></script><script src="/assets/js/4.b8ad457b.js" defer></script><script src="/assets/js/3.a1845274.js" defer></script>
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?67cfceeef119a8accf51c7c87e0fa067";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })();

      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?3dd88b8a3279675ebd83ecae11016bc1";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })();
    </script>
  </body>
</html>
